<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品菜单1</title>
    <link th:href="@{login/css/bootstrap1.css}" rel="stylesheet"/>
    <link th:href="@{/login/css/productTab.css}" rel="stylesheet"/>
    <script th:src="@{login/js/bootstrap1.js}"></script>
    <script th:src="@{/login/js/jquery.js}"></script>
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
            padding-bottom: 40px;
        }

        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            margin-bottom: 20px;
        }

        .card-header {
            background-color: #4a6baf;
            color: white;
            font-weight: 600;
        }

        .form-label {
            font-weight: 500;
        }

        .preview-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .btn-submit {
            background-color: #4a6baf;
            color: white;
            font-weight: 600;
            padding: 10px 20px;
        }

        .btn-submit:hover {
            background-color: #3a5a9f;
        }
    </style>
</head>
<body>
<!--纯修改页面-->
<div class="container">
    <div class="row">
        <!-- 商品信息表单 - 占8格 -->
        <div class="col-lg-8 col-md-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-info-circle me-2"></i>商品信息
                </div>
                <div class="card-body">
                    <form>
                        <!-- 基本信息 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">基本信息</h5>
                            <input type="hidden" id="id" name="id" th:value="${product.id}">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="productName" class="form-label">商品名称</label>
                                    <input type="text" class="form-control" id="productName" name="productName"
                                           placeholder="输入商品名称" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="productCategory" class="form-label">商品分类</label>
                                    <select class="form-select" id="productCategory" name="productCategory" required>
                                        <!--默认"请选择分类"，当后台没有给商品分类（null）或 分类是空字符串时，设为默认选项-->
                                        <option value="">请选择分类</option>
                                        <option value="电子产品">电子产品</option>
                                        <option value="电脑配件">电脑配件</option>
                                        <option value="家居用品">家居用品</option>
                                        <option value="服装">服装</option>
                                        <option value="书籍" >书籍</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- 价格与库存 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">价格与库存</h5>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="productPrice" class="form-label">商品价格</label>
                                    <div class="input-group">
                                        <span class="input-group-text">¥</span>
                                        <input type="number" class="form-control" id="productPrice" name="productPrice"
                                               placeholder="0.00" step="0.01" min="0" required>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="productStock" class="form-label">库存数量</label>
                                    <input type="number" class="form-control" id="productStock" name="productStock"
                                           placeholder="0" min="0" required>
                                </div>
                            </div>
                        </div>

                        <!-- 商品图片 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">商品图片</h5>
                            <div class="mb-3">
                                <label for="productImages" class="form-label">上传商品图片</label>
                                <input class="form-control" type="file" id="productImages" name="productImages"
                                       accept="image/*">
                                <div class="form-text">支持JPG、PNG格式</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="description" class="form-label">商品描述</label>
                            <textarea id="description" name="description" class="form-control"
                                      rows="3"></textarea>
                        </div>
                        <!-- 商品状态 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">商品状态</h5>
                            <div class="mb-3">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status1" value="1">
                                    <label class="form-check-label" for="status1">正常(上架)</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status2" value="0">
                                    <label class="form-check-label" for="status2">下架</label>
                                </div>
                            </div>
                        </div>

                        <!-- type="submit" 会触发表单提交，导致页面刷新，AJAX 没机会执行 -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="button" class="btn btn-submit" onclick="postProduct()">保存商品信息</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //传递数据
    function collectData() {
        const priceVal = parseFloat($('#productPrice').val());  // 转成数字，如 99.99
        const stockVal = parseInt($('#productStock').val(), 10); // 转成整数，如 10
        const statusVal = parseInt($('[name="status"]:checked').val(), 10); // "1" -> 1（数字）
        // $('[name="status"]:checked')	：找到 name="status" 并且 被选中 的那个单选按钮（radio）
        // .val()	获取这个按钮的 value 值（字符串），比如 "1" 或 "0"
        // parseInt(..., 10)	把字符串 "1" 转换成数字 1，十进制，转为整数
        // parseInt(...)	把字符串 "1" 转换成数字，十进制，转为数字
        return {
            id: $('#id').val() ? parseInt($('#id').val()) : null, // 关键
            name: $('#productName').val().trim(),
            description: $('#description').val().trim(),
            category: $('#productCategory').val().trim(),
            price: isNaN(priceVal) ? null : priceVal,         // 确保是数字，否则 null
            stock: isNaN(stockVal) ? null : stockVal,         // 确保是数字，否则 null
            status: isNaN(statusVal) ? null : statusVal,       // 1 或 0，数字类型,能转成正常数字就留数字，否则给 null，避免把 NaN 这种脏数据发给服务器。
            imageUrl: $('#productImages').val().trim(),
            //$ 是 jQuery 的“入口函数”。选择器 $('#imageUrl') 找到页面中 id="imageUrl" 的那个 DOM 元素
            // jQuery 的 .val() 方法用来取（或设）表单元素的当前值,这里只传了空括号，表示“获取”用户此刻填进去的字符串
            //    .trim() 原生字符串方法，把开头、结尾的空格/换行全部去掉
        };
    }

    function postProduct() {
        const data = collectData();//调用函数使用这个函数获取数据
        if (!data.name) {
            alert('商品名称不能为空！');
            $('#productName').focus();
            return;
        }
        if (!data.category) {
            alert('请选择商品分类！');
            $('#productCategory').focus();
            return;
        }

        $.ajax({
            type: 'POST',
            url: '/postProductList1',
            contentType: 'application/json',// 告诉服务器“我发的是 JSON”，
            // 用了 JSON.stringify(data)，就必须加 contentType: 'application/json'，否则后端会直接 400 报错
            data: JSON.stringify(data),
            success: resp => {
                if (resp === 'PostOK') {//新增数据
                    alert("添加成功", "success");
                    setTimeout(() => {
                        // location.reload();   // 重新加载当前页面
                        window.location.href = "/productTable1";//跳转到productTable1页面
                    }, 1500);
                }
            },
            error: function () {
            }
        });
    }
</script>
</body>
</html>